<template>
    <div class="w-100 h-100">
    <containTemplete
     :title="'水环境评价'" 
     :secondTitles="['水环境因子污染评估等级','水环境因子含量趋势分析','污染物削减情况']"
        :slotWidth="[33,33, 33]"

     >
    
        <template #left>
            <div class="w-100 h-100">
                <yzwrpg
                    :unit="left_value"
                />

            </div>
        </template>
        <template #middle>
            <div class="w-100 h-100">
                <yzhlqs
                    :year="middle_year_value"
                    :unit="middle_unit_value"
            
                ></yzhlqs>

            </div>
        </template>

        <template #right>
            <wrwxj :unit="right_unit_value"/>
        </template>

      <template #left_control>
          <proSelect
              :optionsData="useOptions().waterUnit"
              :defaultSelectValue="0"
              v-model:select-value="left_value"
              :width="100"
          >
          </proSelect>
      </template>

      <template #middle_control>
        <proSelect
            :optionsData="useOptions().year()"
            :defaultSelectValue="2024"
            v-model:select-value="middle_year_value"
            :width="100"
        >
        </proSelect>

        <proSelect
            :optionsData="useOptions().waterUnit"
            :defaultSelectValue="0"
            v-model:select-value="middle_unit_value"
            :width="100"
        >
        </proSelect>
      </template>

      <template #right_control>
        <proSelect
            :optionsData="useOptions().waterUnit"
            :defaultSelectValue="0"
            v-model:select-value="right_unit_value"
            :width="100"
        >
        </proSelect>
      </template>


    
    </containTemplete>
    </div>
</template>

<script setup lang='ts'>
import containTemplete from '@/components/project/containTemplete.vue';
import qyyslypjb from './qyyslypjb.vue';
import h_normal from '@/components/common/echart/h_nomal.vue';
import yzwrpg from './yzwrpg.vue'
import yzhlqs from './yzhlqs.vue'
import wrwxj from './wrwxj.vue'
import { useOptions } from "@/hook/useOptions";
const  echartsData=[
   
    
   
    {
        name:'琴断口街道',
        value:33
    },
    {
        name:'州头街道',
        value:45
    },{
        name:'鹦鹉街道',
        value:65
    },{
        name:'晴川街道',
        value:87
    }, {
        name:'建桥街道',
        value:120
    },
    
]
const left_value = ref(0)
const middle_year_value = ref(2024)

const middle_unit_value = ref(0)

const right_unit_value = ref(0)

</script>

<style scoped lang="less" >

</style>